import { getToken, setToken } from '@/utils/auth'
import { login, sysProfile, sysUser } from '@/api/user.js'
// 导入动态路由
import asyncRouters from '@/router/modules/index.js'
import router from '@/router'
import { constantRoutes } from '@/router'
import { resetRouter } from '@/router/index.js'
const state = {
  token: getToken() || '',
  userInfo: ''
}
const mutations = {
  setToken(state, value) {
    state.token = value
    setToken(value)
  },
  setUserInfo(state, value) {
    state.userInfo = value
  },
  logout() {
    state.token = '' // 清空token
    setToken('') // token为空
    state.userInfo = '' // 清除用户信息
    resetRouter() // 退出，还原路由
  }
}
const actions = {
  async toLogin({ commit }, value) {
    const res = await login(value)
    console.log(res)
    commit('setToken', res.data)
  },
  async getUserInfo({ commit }) {
    const res = await sysProfile()
    // console.log(res)
    const res2 = await sysUser(res.data.userId)
    /* 合并对象
    let a={cc:1}
    let b={dd:2}
    {...a,...b}
    Object.assign(a,b) a为目标队形将b合并到a之后
    */
    // 合并对象并存储到userInfo
    commit('setUserInfo', { ...res.data, ...res2.data }) // 合并对像
    // console.log(state.userInfo)s
    // console.log(asyncRouters)
    const newArr = asyncRouters.filter((item) => {
      return state.userInfo.roles.menus.includes(item.name)
    })
    // console.log(newArr)
    newArr.push({ path: '*', redirect: '/404', hidden: true }) // 404必须在最后面
    commit('routes/setRoutesList', [...constantRoutes, ...newArr], {
      root: true
    })
    console.log(newArr)
    router.addRoutes(newArr) // 添加路由
  }
}
const getters = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
// 三个相关模块
//     帐号管理：帐号的增删改查，为该帐号分配角色
//     角色管理：角色的增删改查，为角色分配页面与按钮权限
//     页面管理：需要权限管理的页面与按钮的增删改查
// 三大类产：
//    api权限：后端处理，状态码返回我们，我们统一在响应拦截中处理
//    页面访问权限（包含菜单）：前端+后端返回页面权限数据
//    按钮权限：前端+后端返回按钮权限数据

// 前端实现：
//   页面访问权限（包含菜单）
//     1：将路由分为二块，
//         静态路由：不需要权限管理的路由，设置为默认路由
//         动态路由：单独抽离出来，默认是没有的（没有添加到routes内）
//     2：在导航守卫中获取用户信息后，将动态路由与用户信息返回的权限数据做匹配
//        匹配到有权限的路由后通过addRouts添加到当前路由
//        坑点：addRoutes添加的路由不能立马使用
//        解决：在导航守卫添加完路由后，next(to,full)再经历一次导航守卫
//        坑点2：404问题（如果默认路由中配制了404 的*号匹配，它因为addRoutes不能立马使用，让404匹配到，就立马跳转到404了）
//        解决：将404的匹配放到addRoutes添加路由数组的最后
//     3：菜单权限处理
//        原本使用this.$router.options.routes因为它不是响应式数据
//        将路由配制通过vuex进行管理（与路由配制数据同步）
//        使用vuex的路由配制数据
//     4：退出换帐号时，上一帐号的路由数据会响应到下一帐号
//        解决：在每一次退出帐号时都重置路由

//    按钮权限：
//       通过自定义指令处理
//         读取用户信息中当前用户的按钮权限数据与指令对应的按钮字段做匹配，是否显示对应按钮控制
